<template>
  <div class="kehu-more-detail">
    <div class="kehu-more-detail-head">
      <div class="kehu-more-detail-head-img"></div>
      <div style="margin: 10px">
        <div class="kehu-more-detail-head-name">王伟</div>
        <div class="kehu-more-detail-head-city">北京</div>
      </div>
    </div>
    <div class="kehu-more-detail-main">
      <div class="kehu-more-detail-main-panel">
        <div class="kehu-more-detail-main-head">
          <el-tabs v-model="activeName">
            <el-tab-pane label="历史会话" name="info">
              <div style="margin: 10px 0 20px 0">
                <el-button type="primary" round size="mini">全部</el-button>
                <el-button type="primary" round size="mini">本周</el-button>
                <el-button type="primary" round size="mini">本月</el-button>
                <el-button type="primary" round size="mini">上月</el-button>
              </div>
              <div style="width: 900px">
                <base-table
                  :mytitle="historyList.title"
                  :mydata="historyList.data"
                ></base-table>
                <div class="pages">
                  <el-pagination
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="400"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="历史工单" name="history">
              <div style="margin: 10px 0 20px 0">
                <el-button type="primary" round size="mini">全部</el-button>
                <el-button type="primary" round size="mini">本周</el-button>
                <el-button type="primary" round size="mini">本月</el-button>
                <el-button type="primary" round size="mini">上月</el-button>
              </div>
              <div style="width: 900px">
                <base-table
                  :mytitle="historyGongdanList.title"
                  :mydata="historyGongdanList.data"
                  type="khxq"
                ></base-table>
                <div class="pages">
                  <el-pagination
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="400"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="拉黑记录" name="usual">
              <div style="margin: 10px 0 20px 0">
                <el-button type="primary" round size="mini">全部</el-button>
                <el-button type="primary" round size="mini">本周</el-button>
                <el-button type="primary" round size="mini">本月</el-button>
                <el-button type="primary" round size="mini">上月</el-button>
              </div>
              <div style="width: 900px">
                <base-table
                  :mytitle="blackList.title"
                  :mydata="blackList.data"
                ></base-table>
                <div class="pages">
                  <el-pagination
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, prev, pager, next, sizes, jumper"
                    :total="400"
                  >
                  </el-pagination>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable";
export default {
  components: {
    BaseTable,
  },
  mounted() {
    this.$store.commit("setTitle", "客户详情");
    this.$store.commit("NavStyleClear", "客户");
  },
  data() {
    return {
      activeName: "info",
      historyList: {
        title: [
          {
            name: "访问时间",
            prop: "time",
            width: 200,
          },
          {
            name: "来源",
            prop: "origin",
            width: 140,
          },
          {
            name: "客服",
            prop: "kefu",
            width: 140,
          },
          {
            name: "受理客服组",
            prop: "group",
            width: 140,
          },
          {
            name: "访问时长",
            prop: "visitTime",
            width: 140,
          },
          {
            name: "满意度",
            prop: "please",
            width: 140,
          },
        ],
        data: [
          {
            time: "2020/03/09 10:55",
            origin: "微信",
            kefu: "客服小美",
            group: "未分组",
            visitTime: "8分45秒",
            please: "5",
          },
          {
            time: "2020/03/09 10:55",
            origin: "微信",
            kefu: "客服小美",
            group: "未分组",
            visitTime: "8分45秒",
            please: "5",
          },
          {
            time: "2020/03/09 10:55",
            origin: "微信",
            kefu: "客服小美",
            group: "未分组",
            visitTime: "8分45秒",
            please: "5",
          },
          {
            time: "2020/03/09 10:55",
            origin: "微信",
            kefu: "客服小美",
            group: "未分组",
            visitTime: "8分45秒",
            please: "5",
          },
          {
            time: "2020/03/09 10:55",
            origin: "微信",
            kefu: "客服小美",
            group: "未分组",
            visitTime: "8分45秒",
            please: "5",
          },
        ],
      },
      historyGongdanList: {
        title: [
          {
            name: "工单ID",
            prop: "id",
            width: 90,
          },
          {
            name: "工单标题",
            prop: "title",
            width: 126,
          },
          {
            name: "工单渠道",
            prop: "source",
            width: 136,
          },
          {
            name: "工单状态",
            prop: "status",
            width: 136,
          },
          {
            name: "客户姓名",
            prop: "name",
            width: 136,
          },
          {
            name: "最后更新时间",
            prop: "time",
            width: 140,
          },
        ],
        data: [
          {
            id: "32533819",
            title: "客户报价",
            source: "手动录入",
            status: "未分配",
            name: "李永乐",
            time: "2020/03/09 10:55",
          },
          {
            id: "32533819",
            title: "客户报价",
            source: "手动录入",
            status: "未分配",
            name: "李永乐",
            time: "2020/03/09 10:55",
          },
          {
            id: "32533819",
            title: "客户报价",
            source: "手动录入",
            status: "已分配",
            name: "李永乐",
            time: "2020/03/09 10:55",
          },
          {
            id: "32533819",
            title: "客户报价",
            source: "手动录入",
            status: "未分配",
            name: "李永乐",
            time: "2020/03/09 10:55",
          },
          {
            id: "32533819",
            title: "客户报价",
            source: "手动录入",
            status: "未分配",
            name: "李永乐",
            time: "2020/03/09 10:55",
          },
        ],
      },
      blackList: {
        title: [
          {
            name: "拉黑时间",
            prop: "time",
            width: 158,
          },
          {
            name: "操作客服",
            prop: "kefu",
            width: 123,
          },
          {
            name: "拉黑来源",
            prop: "source",
            width: 156,
          },
          {
            name: "拉黑原因",
            prop: "reason",
            width: 466,
          },
        ],
        data: [
          {
            time: "2020/03/09 10:55",
            kefu: "客服美丽",
            source: "客户中心",
            reason: "多次辱骂客服",
          },
          {
            time: "2020/03/09 10:55",
            kefu: "客服美丽",
            source: "客户中心",
            reason: "多次辱骂客服",
          },
          {
            time: "2020/03/09 10:55",
            kefu: "客服美丽",
            source: "客户中心",
            reason: "多次辱骂客服",
          },
          {
            time: "2020/03/09 10:55",
            kefu: "客服美丽",
            source: "客户中心",
            reason: "多次辱骂客服",
          },
          {
            time: "2020/03/09 10:55",
            kefu: "客服美丽",
            source: "客户中心",
            reason: "多次辱骂客服",
          },
        ],
      },
    };
  },
};
</script>

<style>
.kehu-more-detail {
  width: 942px;
  height: 594px;
  background-color: #ffffff;
  padding: 20px 20px;
}

.kehu-more-detail-head {
  width: 100%;
  height: 50px;
  display: flex;
  margin-bottom: 10px;
}

.kehu-more-detail-head-img {
  width: 64px;
  height: 64px;
  background-color: lightgrey;
  border-radius: 50%;
}

.kehu-more-detail-head-name {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 32px;
  font-size: 28px;
}

.kehu-more-detail-head-city {
  font-family: PingFangSC-Regular, "PingFang SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #999999;
}

.kehu-more-detail-main {
}

.kehu-more-detail-main-head .el-tabs__header {
  line-height: 64px;
}

.kehu-more-detail-main-head .el-tabs__item {
  padding-right: 60px;
}

.kehu-more-detail-main-head .el-tabs__nav {
  right: -20px;
}

.kehu-more-detail-main-head .el-tabs__item.is-active {
  color: #006eff;
}
</style>